<div class="row content">
    <div class="list-container">
        <div class="condition">
            <form #searchForm="ngForm" (submit)="searchClassEntity()">
                    <div class="row">
                        <div class="col">
                            <input type="text"
                            class="form-control my-1" 
                            #uclassName="ngModel" 
                            name="className" 
                            [(ngModel)]="search.class_name" 
                            placeholder="班级名称">
                        </div>
                        <div class="col">
                            <select 
                            class="custom-select my-1 mr-sm-2" 
                            #utermId="ngModel" 
                            name="term_id" 
                            [(ngModel)]="search.term_id"
                            >
                                <option value="">请选择学期...</option>
                                <option *ngFor="let termItem of allTerms" [value]="termItem.id">
                                    {{ termItem.name }}
                                </option>
                            </select>
                        </div>
                        <div class="col">
                            <input type="number"
                            class="form-control my-1" 
                            #ustartTime="ngModel" 
                            name="start_time" 
                            [(ngModel)]="search.start_time" 
                            placeholder="开始时间">
                        </div>
                        <div class="col">
                            <input type="number"
                            class="form-control my-1" 
                            #uendTime="ngModel" 
                            name="end_time" 
                            [(ngModel)]="search.end_time" 
                            placeholder="结束时间">
                        </div>
                        <div class="col"> 
                            <button 
                            type="submit"
                            [disabled]="!searchForm.form.valid"
                            class="btn btn-primary my-1">搜索</button> 
                        </div>
                        <div class="col"> 
                            <button (click)="openShowAddMemberModal(memberAddModalTemplate)" type="button" class="btn btn-primary my-1">新增学员</button> 
                        </div>
                    </div>
            </form>
        </div>
        <div class="list">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">上课时间</th>
                        <th scope="col">学期</th>
                        <!-- <th scope="col">课程</th> -->
                        <th scope="col">班级</th>
                        <th scope="col">当前人数/总人数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody *ngIf="classEntities">
                    <tr *ngFor="let item of classEntities"  >
                        <td>{{ item.id }}</td>
                        <td>{{ item.start_time }}:00 ~ {{ item.end_time }}:00 </td>
                        <td>{{ item.term.name }} </td>
                        <!-- <td>{{ item.course.name }} </td> -->
                        <td>{{ item.name }} </td>
                        <td> {{ item.members.length }}/{{ item.member_limit }} </td>
                        <td>
                            <button (click)="openShowMembersModal(showMemberTemplate, item)" class="btn btn-primary btn-sm" type="button">查看学员</button>
                            <button (click)="openShowAddClassMemberModal(addClassMemberTemplate, item)" class="btn btn-primary btn-sm">添加学员 </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <pagination 
            *ngIf="page"
            [totalItems]="page.total" 
            [(ngModel)]="page.currentPage" 
            [itemsPerPage]="page.perPage"
            (pageChanged)="pageChanged($event)"
            [maxSize]="maxSize"
            [rotate]="rotate" 
            [boundaryLinks]='true'
            class="pagination-sm right"
        previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>

    </div>

    <ng-template #addClassMemberTemplate>
        <div class="modal-header">
            <h4 class="modal-title pull-left">添加学员</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="closeShowAddClassMemberModal()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
      
          <div class="modal-body">
                <div class="container">
                        <form #searchMemberForm="ngForm" (submit)="searchMember(searchMemberForm.value)">
                                <div class="row">
                                    <div class="col">
                                        <input type="text"
                                        class="form-control my-1" 
                                        #uMemberName="ngModel" 
                                        name="memberName" 
                                        [(ngModel)]="memberSearch.name" 
                                        placeholder="学员姓名">
                                    </div>
                                    <!-- <div class="col">
                                        <select 
                                        class="custom-select my-1 mr-sm-2" 
                                        >
                                            <option selected>请选择学期...</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div> -->
                                    <div class="col"> 
                                        <button 
                                        type="submit"
                                        [disabled]="!searchForm.form.valid"
                                        class="btn btn-primary my-1">搜索</button> 
                                    </div>
                                    
                                </div>
                        </form>
                </div>
              <table class="table">
                  <thead>
                  <tr>
                      <th scope="col">#</th>
                      <th scope="col">学员id</th>
                      <th scope="col">学员姓名</th>
                      <th scope="col">操作</th>
                  </tr>
                  </thead>
                  <tbody *ngIf="memberList">
                      <tr *ngFor="let member of memberList;index as i; trackBy: trackByFn">
                          <th scope="row">{{ i+1 }}</th>
                          <td>{{ member.id }}</td>
                          <td>{{ member.name}}</td>
                          <td>
                              <button (click)="addMember(member)" class="btn btn-primary btn-sm" type="button">添加</button>
                          </td>
                      </tr>
                  </tbody>
              </table>
              <pagination 
                *ngIf="memberPage"
                [totalItems]="memberPage.total" 
                [(ngModel)]="memberPage.currentPage" 
                [itemsPerPage]="memberPage.perPage"
                (pageChanged)="memberPageChanged($event)"
                [maxSize]="maxSize"
                [rotate]="rotate" 
                [boundaryLinks]='true'
                class="pagination-sm right"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>

          </div>
      
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="closeShowAddClassMemberModal()">关闭</button>
          </div>
    </ng-template>


    <!-- 查看学员 -->
    <ng-template #showMemberTemplate>
        <div class="modal-header">
            <h4 class="modal-title pull-left">查看学员</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="membersModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
      
          <div class="modal-body">
            
          <table class="table">
              <thead>
              <tr>
                  <th scope="col">#</th>
                  <th scope="col">学员id</th>
                  <th scope="col">学员姓名</th>
                  <th scope="col">操作</th>
              </tr>
              </thead>
              <tbody *ngIf="classMemberList">
                  <tr *ngFor="let item of classMemberList;index as i; trackBy: trackByFn">
                      <th scope="row">{{ i+1 }}</th>
                      <td>{{ item.member_id }}</td>
                      <td>{{ item.member_name}}</td>
                      <td>
                          <button (click)="removeMember(item)" class="btn btn-primary btn-sm" type="button">移除</button>
                      </td>
                  </tr>
              </tbody>
          </table>
          </div>
      
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="membersModal.hide()">关闭</button>
          </div>        
    </ng-template>

    <!-- 新增学员模板 -->
    <ng-template #memberAddModalTemplate>
        <div class="modal-header">
            <h4 class="modal-title pull-left">新增学员</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="addMemberModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
      
          <div class="modal-body">
            <form #addForm="ngForm" (submit)="addMemberItem(addForm.value)">
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">会员名称</label>
                  <div class="col-sm-9">
                      <input type="text"
                      *ngIf="member"
                      required
                      class="form-control"
                      name="name"
                      [(ngModel)]="member.name"
                      placeholder="会员名称"
                      #uname="ngModel"
                      >
                  </div>
              </div>
              <div class="form-group row">
                  <label for="phone" class="col-sm-3 col-form-label">联系电话</label>
                  <div class="col-sm-9">
                      <input type="text"
                      *ngIf="member"
                      required
                      class="form-control"
                      name="phone"
                      [(ngModel)]="member.phone"
                      placeholder="联系电话"
                      #uphone="ngModel"
                      >
                  </div>
              </div>
              <!-- <div class="form-group row">
                  <label for="age" class="col-sm-3 col-form-label">年龄</label>
                  <div class="col-sm-9">
                      <input type="number"
                      *ngIf="member"
                      required
                      class="form-control"
                      name="age"
                      [(ngModel)]="member.age"
                      placeholder="年龄请输入数字"
                      #uage="ngModel"
                      >
                  </div>
              </div> -->
              <div class="form-group row">
                <label for="age" class="col-sm-3 col-form-label">会籍
                </label>
                <div class="col-sm-9">
                    <input type="text"
                    *ngIf="member"
                    required
                    class="form-control"
                    name="age"
                    [(ngModel)]="member.saler"
                    placeholder="请输入会籍(销售员)"
                    #uage="ngModel"
                    >
                </div>
            </div>
              <div class="form-group row">
                  <h1 class="col-sm-12">排入下面班级</h1>
              </div>
            <div class="form-group row">
                <label for="age" class="col-sm-3 col-form-label">学期</label>
                <div class="col-sm-9">
                    <select
                    required
                    class="form-control"
                    name="term_id"
                    [(ngModel)]="member_term_id"
                    #uterm_id="ngModel"
                    (change)="geAllClassEntitiesByTerm()"
                    >
                        <option>请选择学期</option>
                        <option
                            *ngFor="let item of allTerms"
                            value="{{item.id}}"
                        >{{ item.name }}</option>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="age" class="col-sm-3 col-form-label">时间</label>
                <div class="col-sm-4">
                    <input type="number"
                    required
                    class="form-control"
                    name="member_start_time"
                    [(ngModel)]="member_start_time"
                    placeholder="开始时间"
                    (change)="geAllClassEntitiesByTerm()"                    
                    #umemberStartTime="ngModel"
                    >
                </div>
                <div class="col-sm-1"></div>
                <div class="col-sm-4">
                    <input type="number"
                    required
                    class="form-control"
                    name="member_end_time"
                    [(ngModel)]="member_end_time"
                    placeholder="结束时间"
                    (change)="geAllClassEntitiesByTerm()"                    
                    #umemberEndTime="ngModel"
                    >
                </div>
            </div>
            <div class="form-group row">
                <label for="age" class="col-sm-3 col-form-label">班级</label>
                <div class="col-sm-9">
                    <select
                    required
                    class="form-control"
                    name="term_id"
                    [(ngModel)]="member_class_id"
                    #uterm_id="ngModel"
                    >
                        <option>请选择班级</option>
                        <option
                            *ngFor="let item of allClassEntities"
                            value="{{item.id}}"
                        >{{ item.name }}</option>
                    </select>
                </div>
            </div>
      
              <div class="form-group row">
                  <div class="col-sm-2">
                      <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                  </div>
              </div>
            </form>
          </div>
      
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="addMemberModal.hide()">关闭</button>
          </div>
    </ng-template>
</div>
  